const rootFiber = require('./element');
let nextUnitOfWork = null;

function workLoop(){
  while(nextUnitOfWork){
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
  }
  if(!nextUnitOfWork){
    console.log('render阶段结束了');
  }
}

function performUnitOfWork(fiber) {
  console.log('performUnitOfWork');
  beginWork(fiber); // 处理此fiber
  if(fiber.child){ // 如果有儿子 则返回大儿子
    console.log('返回子节点:',fiber.child);
    return fiber.child;
  }
  while (fiber){
    /*
      第一次进来:
        打印C1结束->通过C1找到C2并返回
      第二次进来:
        C2没有儿子 打印C2结婚时-> C2也没有兄弟 -> fiber = fiber.return fiber赋了新值B1,fiber有值,继续while循环
        -> 打印B1完成 -> B1找到自己的下个兄弟节点B2并返回
    */
    completeUnitOfWork(fiber); // C1 节点没有孩子 直接完成 开始遍历下一个节点 看有没有兄弟节点 有则返回兄弟节点 无则返回上级节点 // C2
    if (fiber.sibling) { // C2
      console.log('返回下一个兄弟节点:',fiber.sibling);
      return fiber.sibling; // 如果说有弟弟 返回 弟弟
    }
    console.log('返回上级节点:',fiber.return);
    fiber = fiber.return; //
  }
}

function beginWork(fiber){
  console.log('开始 fiber.key:',fiber.key);
}

function completeUnitOfWork(fiber){
  console.log('结束 fiber.key:',fiber.key);
}

nextUnitOfWork = rootFiber;
workLoop();


/*
performUnitOfWork
开始 fiber.key: A1
返回子节点:
{
  type: 'div',
  key: 'B1',
  return: { type: 'div', key: 'A1', child: [Circular] },
  sibling:
   {
     type: 'div',
     key: 'B2',
     return: { type: 'div', key: 'A1', child: [Circular] }
   },
  child:
   {
     type: 'div',
     key: 'C1',
     return: [Circular],
     sibling: { type: 'div', key: 'C2', return: [Circular] }
   }
}
performUnitOfWork
开始 fiber.key: B1
返回子节点: { type: 'div',
  key: 'C1',
  return:
   { type: 'div',
     key: 'B1',
     return: { type: 'div', key: 'A1', child: [Circular] },
     sibling: { type: 'div', key: 'B2', return: [Object] },
     child: [Circular] },
  sibling:
   { type: 'div',
     key: 'C2',
     return:
      { type: 'div',
        key: 'B1',
        return: [Object],
        sibling: [Object],
        child: [Circular] } } }
performUnitOfWork
开始 fiber.key: C1
结束 fiber.key: C1
返回下一个兄弟节点: { type: 'div',
  key: 'C2',
  return:
   { type: 'div',
     key: 'B1',
     return: { type: 'div', key: 'A1', child: [Circular] },
     sibling: { type: 'div', key: 'B2', return: [Object] },
     child:
      { type: 'div',
        key: 'C1',
        return: [Circular],
        sibling: [Circular] } } }
performUnitOfWork
开始 fiber.key: C2
结束 fiber.key: C2
返回上级节点: { type: 'div',
  key: 'B1',
  return: { type: 'div', key: 'A1', child: [Circular] },
  sibling:
   { type: 'div',
     key: 'B2',
     return: { type: 'div', key: 'A1', child: [Circular] } },
  child:
   { type: 'div',
     key: 'C1',
     return: [Circular],
     sibling: { type: 'div', key: 'C2', return: [Circular] } } }
结束 fiber.key: B1
返回下一个兄弟节点: { type: 'div',
  key: 'B2',
  return:
   { type: 'div',
     key: 'A1',
     child:
      { type: 'div',
        key: 'B1',
        return: [Circular],
        sibling: [Circular],
        child: [Object] } } }
performUnitOfWork
开始 fiber.key: B2
结束 fiber.key: B2
返回上级节点: { type: 'div',
  key: 'A1',
  child:
   { type: 'div',
     key: 'B1',
     return: [Circular],
     sibling: { type: 'div', key: 'B2', return: [Circular] },
     child:
      { type: 'div', key: 'C1', return: [Circular], sibling: [Object] } } }
结束 fiber.key: A1
返回上级节点: undefined
render阶段结束了
*/
